<template>
  <div class="chars"  >
    <div class="map" ref="myEchars"></div>
  </div>
</template>
<script>
import *as echarts from 'echarts'
export default {
  props:{
    dataListvalue:{
      type:Array,
      default:function(){
        return []
      }
    },
    dataListname:{
      type:Array,
      default:function(){
        return []
      }
    }
  },
  watch:{
    dataListname(){
      this.mapChars()
    }
  },
  methods:{
    mapChars(){
      let myChart = echarts.init(this.$refs.myEchars);
      let option = {
        title: {
          subtext: "国内疫情新增趋势",
          left:'20px',
          subtextStyle: {
            color: "#000000",
            fontSize: 16,
            fontWeight: 'bold'
          },
        },
        xAxis: {
          type: 'category',
          data: this.dataListname
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: "axis",
          formatter: function(e, t, n) {
            return e[0].name + "<br />" + '新增确诊：' + e[0].value
          },
        },
        series: [
          {
            data: this.dataListvalue,
            type: 'line',
            smooth: true
          }
        ]
      };
      option && myChart.setOption(option);
    }
  }
}
</script>
<style scoped>
.map{
  width: 770px;
  height: 600px;
}
.chars{
  padding-top:40px ;
}
</style>